.dot-warp {
  position: absolute;
  width:0.4rem;
  height:0.4rem;
}

.dot{
  position: absolute;
  z-index:10;
  width:0.4rem;
  height:0.4rem;
  background-color: sandybrown;
  border-radius: 50%;
}
.dotshadow {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  background-color: burlywood;
  border-radius: 50%;
  -webkit-transform: scale(1.8,1.8);
  -webkit-animation: ripple 1.5s ease 0s infinite
}
.dotshadow-white{
  background-color: goldenrod;
}

@-webkit-keyframes ripple {

  0% {
    opacity: 0.75;
    -webkit-transform: scale(1,1);
  }
  100% {
    -webkit-transform: scale(3,3);
    opacity:0;

  }
}

.palace{
  //position: absolute;
  //z-index: 1;

}
.jiantou1{
  width: 80px;
  height: 80px;
  position: absolute;
  //margin: -1rem -1rem;
  //font-size: 80px!important;
  //color: darkgreen!important;
  //transform: rotate(90deg);
  animation: jian1 2.5s infinite;
  //margin: -0.1rem 0.3rem!important;
  //margin-top: 50px;
  //margin-left: 50%;
}
.jiantou2{
  width: 80px;
  height: 80px;
  position: absolute;
  //margin: -1rem -1rem;
  //font-size: 80px!important;
  //color: darkgreen!important;
  //transform: rotate(-90deg);
  animation: jian2 2.5s infinite;
  //margin: -0.1rem 0.3rem!important;
  //margin-top: 50px;
  //margin-left: 50%;
}
@-webkit-keyframes jian1 {

  0% {transform: translate(0px, 0px) ;}
  //25% {transform: translateY(15px);};
  50% {transform: translate(30px, 30px);}
  //75% {transform: translateY(15px);};
  100% {transform: translate(0px, 0px)}
}
@-webkit-keyframes jian2 {

  0% {transform: translate(0px, 0px) rotate(90deg);}
  //25% {transform: translateY(15px);};
  50% {transform: translate(-30px, 30px) rotate(90deg);}
  //75% {transform: translateY(15px);};
  100% {transform: translate(0px, 0px) rotate(90deg)}
}
//.title{
//  position: absolute;
//  width: 370px;
//  height: 300px;
//  //z-index: 9;
//  //background: darkgrey;
//  //display: flex;
//  //justify-content: space-around;
//  &>div{
//    clear: both;
//    position: absolute;
//    width: 500px;
//    height: 500px;
//    //left: -100px;
//    //top:-100px;
//
//    //background: gainsboro;
//    z-index: 111;
//    & img{
//      clear: both;
//      position: absolute;
//      //left: -100px;
//      //top:-100px;
//      width: 652px;
//      height: 792px;
//      //z-index: -1;
//    }
//    & div{
//      position: absolute;
//      right: -74px;
//      top: 53px;
//      width: 50px;
//      height: 50px;
//      //background: rebeccapurple;
//    }
//    & span{
//      position: absolute;
//      top:540px;
//      display: inline-block;
//      left: 230px;
//      width: 200px;
//      height: 120px;
//
//    }
//  }
//}

.header{
  clear: both;
  position: absolute;
  //left: 50px;
  //top: 380px;
  width: 370px;
  height: 300px;
  z-index: 2;
}



.title {
  position: relative;
  width: 370px;
  height: 300px;
}

.titleImg{
  clear: both;
  width: 750px;
  height: 1334px;
  left: 0px;
  top: 0px;
  position: fixed;
  //background: gainsboro;
  z-index: 3;
  & img{
    clear: both;
    position: absolute;
    left: 50px;
    top:220px;
    width: 652px;
    height: 792px;
  }
  & div{
    position: absolute;
    right: 125px;
    top: 270px;
    width: 50px;
    height: 50px;
    //background: rebeccapurple;
  }
  & span{
    position: absolute;
    top:750px;
    display: inline-block;
    left: 280px;
    width: 200px;
    height: 120px;
    //background: rebeccapurple;
  }
}

















